import React, { Component } from 'react'


export default class State extends Component {
    // 定义内部状态
    state = {
        count: 100,
        flag: false,
        infos: [
            {
                name: '张三',
                age: 20,
                arr: {
                    sd: "sds"
                }
            },
            {
                name: '李四',
                age: 30
            }
        ]
    }
    change = (index) => {
        // this.setState修改数组对象的时候
        // 1. 把原数组给copy一份

        // let infos = [...this.state.infos]
        // infos[index].age += 1
        // this.setState({
        //     infos
        // })

        // 2. 直接修改数据，空调用this.setState
        this.state.infos[index].age += 1
        // 执行render函数
        this.setState({})
    }
    render() {
        const { infos } = this.state
        return (
            <div>
                <ul>
                    {
                       infos.map((item, index) => {
                           return <li key = { index }>
                               姓名：{ item.name } --- 年龄：{ item.age }
                               <button onClick = {() => {
                                //    区分点的哪一个
                                    this.change(index)
                                }}>修改年龄</button>
                           </li>
                       }) 
                    }
                </ul>
            </div>
        )
    }
}
